<script setup>
import handlerModal from './handlerModal.vue'
import { ref } from 'vue'
import { useButtonStyle } from '@/composables/useButtonStyle.js'

// 正确使用组合式函数获取按钮样式
const buttonStyle = useButtonStyle()
defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  loadmoreStatus: {
    type: String,
    default: 'loadmore',
  },
  // 是否代办页面
  isTodo: {
    type: Boolean,
    default: true,
  },
})

const handlerModalRef = ref()
const clickBtn = (item) => {
  handlerModalRef.value.open(item)
}

const clickBtnDetail = (item) => {
  const { businessKey } = item
  uni.navigateTo({
    url: `/pages/serviceWorkbench/detail?businessKey=${businessKey}`,
  })
}
</script>

<template>
  <view v-if="list.length">
    <view class="task-card" v-for="item in list" :key="item.taskId">
      <view class="task-header flex_sb">
        <text class="task-title">{{ item.taskName }}</text>
      </view>
      <view class="task-body" v-if="isTodo">
        <view class="task-info-item">
          <text class="info-label">流程名称：</text>
          <text class="info-value">{{ item.processName }}</text>
        </view>

        <view class="task-info-item">
          <text class="info-label">发起人：</text>
          <text class="info-value">{{ item.starter }}</text>
        </view>

        <view class="task-info-item">
          <text class="info-label">创建时间：</text>
          <text class="info-value">{{ item.createTime }}</text>
        </view>
      </view>
      <view class="task-body" v-else>
        <view class="task-info-item">
          <text class="info-label">任务名称：</text>
          <text class="info-value">{{ item.processName }}</text>
        </view>

        <view class="task-info-item">
          <text class="info-label" style="width: 220rpx">流程启动时间：</text>
          <text class="info-value">{{ item.startTime }}</text>
        </view>

        <view class="task-info-item">
          <text class="info-label" style="width: 220rpx">任务结束时间：</text>
          <text class="info-value">{{ item.endTime }}</text>
        </view>
      </view>
      <view class="task-footer">
        <u-button
          :custom-style="buttonStyle.customStyle"
          size="mini"
          type="primary"
          plain
          @click="clickBtnDetail(item)"
        >
          <u-icon name="error-circle" size="30"></u-icon> 详情
        </u-button>
        <u-button
          v-if="isTodo"
          style="margin-left: 30rpx"
          :custom-style="buttonStyle.customStyle"
          size="mini"
          type="primary"
          plain
          @click="clickBtn(item)"
        >
          <u-icon name="edit-pen" size="30"></u-icon> 处理
        </u-button>
      </view>
    </view>
    <u-loadmore
      margin-top="20rpx"
      margin-bottom="20rpx"
      :status="loadmoreStatus"
    />
  </view>
  <view v-else>
    <u-empty mode="list"></u-empty>
  </view>

  <!-- 处理弹窗 -->
  <handlerModal ref="handlerModalRef" />
</template>

<style lang="scss" scoped>
.task-card {
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  padding: 20rpx;
  margin-bottom: 20rpx;

  .task-header {
    margin-bottom: 20rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f5f5f5;

    .task-title {
      font-size: 32rpx;
      font-weight: bold;
      color: $list-color;
    }
  }

  .task-body {
    .task-info-item {
      display: flex;
      margin-bottom: 16rpx;
      font-size: $list-font-size;
      line-height: 1.5;

      .info-label {
        color: #666;
        width: 160rpx;
        flex-shrink: 0;
      }

      .info-value {
        color: $list-color;
        flex: 1;
      }
    }
  }

  .task-footer {
    padding-top: 20rpx;
    border-top: 1rpx solid #f5f5f5;
    text-align: right;
  }
}
</style>
